// 公共使用 start
$mianColor = #555
$urlHover = #f40
$viceColor = #f40

// #ff9000

@font-face {
  font-family: 'iconfont';  /* project id 632441 */
  src: url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.eot');
  src: url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

$container = 1170px
.container {
    width: $container;
    margin: 0 auto;
}
.clearfix:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0; }

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.bui-box {
  display: block;
  zoom: 1; }

.bui-box:after, .bui-box:before {
  content: "";
  display: table; }

.bui-box:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0; }

.bui-box:after, .bui-box:before {
  content: "";
  display: table; }

.bui-box:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0; }

.bui-box::after {
  display: block;
  content: "";
  clear: both; }

.bui-box::after {
  display: block;
  content: "";
  clear: both; }
a:visited {
  color $mianColor
}
a:hover {
  color $urlHover
}
a {
  text-decoration:none;
}
li {
  list-style none
}
h1,h2,h3,h4,h5,h6,ul,li,p {
  margin 0
  padding 0
  font-family: "Microsoft YaHei";
}
body a {
  color $mianColor
}

// 公共使用 end


// header start
header
  width: 100%;
  height: 91px;
  overflow: auto;
  position: relative;
  .headerBody
    width 100%
    height 90px

    .headerTop
      width 100%
      height 50%
      background-image: linear-gradient(to right,#ff9000,#ff5000 100%);

      .headerInside
        width $container
        height 100%
        margin 0 auto
        overflow: hidden

        .titleCellHeader
          float: left;
          margin-left: 20px;
          color: white;
          font-family: 'futura';
          line-height: 45px;
          font-size: 20px;
          font-weight: 900;
          text-decoration: none;
          letter-spacing:2px
        .titleLogoRight
          float: right;
          margin-left: 14px;
          color: #fff;
          font-family: 'futura';
          line-height: 45px;
          font-size: 15px;
          font-weight: 600;
          padding-left: 5px;
          text-decoration: none;
          .ii
            display: inline-block;
            width: 1px;
            height: 11px;
            background-color: rgba(255, 255, 255, 0.5);
            margin-right: 14px;
            margin-top: 1px;

    .headerBottom
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #ffffff;
      border-bottom 1px #eee solid

  .headerLogo_content
    width: $container;
    margin: 0 auto;
    position: relative;
    pointer-events: none;
    z-index: 100;
    top: -90px;

    .headerLogo
      background-color: #ffffff;
      width: 65px;
      height: 65px;
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: all;
      text-align: center;
      /* z-index: -8; */
      border: 10px solid $urlHover;
      .logonei {
        width 45px
        margin 7px auto
        padding 3px
        background-color $urlHover
        .logoSpan {
          font-size 20px
          color #fff
          font-family "Microsoft YaHei"
        }
      }



// header end



// main start
main
  width: 100%
  .scrollContainer
    width 1170px
    height 260px
  .scrollNews
    position absolute
    width 1170px
    height 260px
    overflow hidden
    .new-btn.new-next-btn
      transition right .4s linear
      background-position 0 -60px
      right -34px
    .new-btn.new-prev-btn
      transition left .4s linear
      background-position 0 0
      left -34px
    .new-next-btn:hover
      background-position:-34px -60px
    .new-prev-btn:hover
	    background-position:-34px 0
    .new-btn
      width:34px;
      height:60px;
      position:absolute;
      top:50%;
      margin-top:-30px;
      background-repeat:no-repeat;
      background-image:url('../image/new-btn.png')
    .scrollNews_width
      position relative
      height 260px
      .scrollNews_dong
        width $container
        height 260px
        display: flex
        justify-content space-between
        float left
        .img-center
          width 390px
          div:hover strong
            height: 35px;
            white-space: normal;
          div
            width 190px
            height 129px
            margin-left 1px
            display inline-block
            overflow hidden
            position: relative;
            strong
              position: absolute;
              height: 15px;
              width: 172px;
              left: 0;
              bottom: 0;
              padding: 22px 10px 7px;
              line-height: 20px;
              font-size: 14px;
              color: #fff;
              overflow: hidden;
              text-overflow: ellipsis;
              // white-space: nowrap;
              transition: all .2s linear;
              background linear-gradient(to top, #2d29262b, rgba(0,0,0,0.0))

        .img-left, .img-right
          width 385px
          height 260px
          overflow hidden
          position: relative;
          strong
            position: absolute;
            height: 15px;
            width: 385px;
            left: 0;
            bottom: 0;
            padding: 22px 10px 7px;
            line-height: 20px;
            font-size: 14px;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
            transition: all .2s linear;
            background linear-gradient(to top, #2d29262b, rgba(0,0,0,0.0))

  .scrollNews:hover .new-next-btn
    right 0
  .scrollNews:hover .new-prev-btn
    left 0

  .segmentation:after
    content: ""
  .segmentation
    width 100%
    height 3px
    background-color $viceColor
    margin 10px auto
  .indexContent {
    display flex
    justify-content space-between

    .nav {
      font-size 16px
      width 125px
      height 800px
      // background-color #777
      .nav_list.Selected {
        position fixed
        top 19px
      }
      .nav_list {
        margin 0
        padding 0
        width 145px
        >li:hover>a {
          color $viceColor
          font-weight 800
          border-bottom 2px solid $viceColor
          i {
            font-weight 400
          }
        }
        >li.activation > a {
          color $viceColor
          font-weight 800
          border-bottom 2px solid $viceColor
          i {
            font-weight 400
          }
        }
        >li {
          text-align center
          margin-top 5px
          >a {
            width 60px
            padding-bottom 3px
            display inline-block
            margin 5px auto
          }
          .icon {
            margin-right 5px
          }
        }
        .nav-more {
          position relative
          .nav-more-layer {
            display none
            position absolute
            bottom  0
            left 130px
            width: 304px
            z-index 30
            background-color #fff
            padding-right  2px
            padding-bottom  2px
            border 1px solid #e8e8e8
            .bui-boxx {

              li {
                float left
                width 45%
                height 42px
                >a {
                  line-height 42px
                }
              }

            }
          }
        }

      }

    }
    .informationFlow {

      width 690px
      height 1500px
      // .ty-card-thumb:hover {
      //   transform: scale(1.1, 1.1);
      // }
      // background-color #444
      .ty-top-ent {
        display block
        border-bottom 1px solid #e8e8e8
        margin-left 10px
        margin-right 10px
        .ty-card {
          padding-left 5px
          color #2d29262b;
          .ty-card-title {
            margin-top 15px
            margin-bottom 5px
          }
          // 轮播下diy开始
          .ty-card-content {
            display: flex;
            align-items: center
              padding-bottom 10px
             .ty-card-image {
                width 150px
                .ty-card-hidden {
                  position relative
                  margin-top 5px
                  width 150px
                  height 100px
                  overflow hidden
                }
              }
            div {
              display inline-block
            }
            .ty-card-list {
              margin-left 20px
              p:hover a {
                color $urlHover
              }
              p {
                margin 0;
                padding: 7px 0;
                height: 20px;
                text-indent: 12px;
                line-height: 20px;
                background: url('../image/prefix-makeupurl.png') left center no-repeat;
                white-space: nowrap;
                font-size: 16px;
                a {
                  color #555
                }
                :hover a {
                  color $urlHover
                }
              }
            }
          }
        }
        // 轮播下diy结束
      }
    }

    .xxl-threeimg {
      margin 10px 10px

      .xxl-threeimg-body {
        padding-left 5px
        border-bottom: 1px solid #e8e8e8;
        padding-bottom 10px
        .loading {
          margin 20px auto
          text-align center
          font-size 14px
          color #999
        }
        .xxl-threeimg-header {
          font-size 16px
          margin 10px 0
        }
        .xxl-threeimg-main {
          width 660px
          display inline-flex
          display -webkit-inline-flex; /* Safari */
          // align-items flex-start
          justify-content space-between
          .xxl-threeimg-image {
            display inline-block
            width 156px
            height 104px
            >a {
              width 156px
              height 104px
              >img {
                width 156px
              }
            }
            .more {
              text-align center
              line-height 100px
              background-color #eee
              display block
            }
          }
        }
        .xxl-threeimg-footer {
          width 480px
          font-size 12px
          margin-top 10px
          a {
            display inline-block
            margin-right 5px
          }
          .xxl-threeimg-types {
            border 1px solid #41baad
            color #41baad!important;
            padding 2px
            margin-left 5px
          }
          .xxl-threeimg-source {

          }
          .xxl-threeimg-ad-title {
            display block
            font-size 18px
            font-weight 800
            margin 5px 0
          }
        }
      }
    }

    .sidebar {
      // 侧边栏固定
      .action {
        position fixed
        top 0
        width 330px
      }
      width 330px
      .sidebar-pic {
        width: 80px
        height: 60px
        margin-right: 12px
        float: left
        text-align: center
      }

      .sidebar-hot {
        margin-bottom 10px
        background-color: #f4f5f6;

        // 今日热搜
        .module-head {
          border-left 2px solid $viceColor
          padding-left 10px
          position relative
          color #222
          margin-bottom 15px
          font-size 18px
          font-weight 700
          .refresh-btn {
            position absolute
            right 0
            top 4px
            font-size: 13px
            color #888
            cursor pointer
            .icon-refresh-btn {
              width 14px
              height 14px
              background-image url(' ');
              background-position -63px -21px
              background-repeat no-repeat
              display inline-block
              vertical-align middle
              margin-left 2px
              margin-top -1px
              margin-right 5px
            }
            .loading-refresh-btn {
                animation: mymove 500ms;
            }
            @keyframes mymove {
              0% {
                transform: rotate(0deg)
              }
              100% {
                transform: rotate(360deg)
              }
            }
          }
        }
        // .headline-list {
        //   li {
        //     margin 10px 0
        //     color #606060
        //     font-size 14px
        //     overflow hidden
        //     height 20px
        //   }
        //    b {
        //     font-weight 800
        //     text-align center
        //     width 15px
        //     margin-right 10px
        //     display: inline-block
        //     color #fff
        //     background-color #8eb9f5
        //     padding 2px 0
        //   }
        //   b.c-index-hot1 {
        //     background-color #F54542
        //   }
        //   b.c-index-hot2 {
        //     background-color #ff8547
        //   }
        //   b.c-index-hot3 {
        //     background-color #ffac38
        //   }
        // }
        h3 {
          border-left 2px solid $viceColor
          padding-left 10px
        }
        padding 10px
        ul {
          p.shengming {
            color #777
            font-size 12px
            line-height 1.5
          }
          margin-top 10px
          padding-left 5px
          li {
            margin 5px 0
            div {
              display inline-block
            }
            :hover p {
              color $urlHover
            }
          }

          .koa {
            display flex
            align-items center
          }
        }
        .sidebar-hot-img {
          :hover {
            transition all .3s ease-out .1s
            transform matrix(1.05, 0, 0, 1.05, 0, 0)
            backface-visibility hidden
          }
          overflow: hidden;
          transform-style: preserve-3d;
          display: inline-block;
          text-align: center;
          background: #e8e8e8;
          img {
            width: auto!important;
            height: 100%!important;
          }
        }
        .sidebar-hot-content {
          p {
            width 220px
            height 32px
            text-overflow ellipsis
            overflow hidden
            font-size 14px
            color #555
          }
        }
      }
    }
  }

// main end

#Loading {
  top:50%;
  left:50%;
  position: absolute;
  -webkit-transform: translateY(-50%)  translateX(-50%);
  transform: translateY(-50%)  translateX(-50%);
  z-index:100;
}
@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.ball-beat > div {
  background-color: #279fcf;
  width: 15px;
  height: 15px;
  border-radius: 100% !important;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
  animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1) {
  -webkit-animation-delay: 0.35s !important;
  animation-delay: 0.35s !important;
}


// footer start

// footer end
